<template>
    <div ref="wrapper">
        <slot></slot>
    </div>
</template>

<script>
import BScroll from 'better-scroll';

export default {
    /**
 * ## probeType
   - 类型：Number
   - 默认值：0
   - 可选值：1、2、3
   - 作用：有时候我们需要知道滚动的位置。当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发[scroll 事件](./events.md#scroll)；
   当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；
   当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。
   如果没有设置该值，其默认值为 0，即不派发 scroll 事件。
 **/

    props: {
        probeType: {
            type: Number,
            default: 1
        },
        click: {
            type: Boolean,
            default: true
        },
        data: {
            type: Array,
            default: null
        },
        listenScroll: {
            // 让scroll监听滚动事件
            type: Boolean,
            default: false
        },
        pullup: {
            // 下拉刷新
            type: Boolean,
            default: false
        },
        beforeScroll: {
            // better-scroll 滚动开始时是否派发beforeScrollStart事件
            type: Boolean,
            default: false
        },
        refreshDelay: {
            type: Number,
            default: 20
        }
    },
    mounted() {
        setTimeout(() => {
            this._initScroll();
        }, 20);
    },
    methods: {
        _initScroll() {
            console.log(this.$refs.wrapper);
            if (!this.$refs.wrapper) {
                return;
            }
            this.scroll = new BScroll(this.$refs.wrapper, {
                probeType: this.probeType,
                click: this.click
            });

            if (this.listenScroll) {
                let me = this;
                this.scroll.on('scroll', pos => {
                    // 监听滚动事件 并把滚动位置传递给listenview.vue的scroll方法
                    // 这里this默认指向scroll
                    me.$emit('scroll', pos);
                });
            }

            if (this.pullup) {
                this.scroll.on('scrollEnd', () => {
                    // 滚动结束时派发scrollEnd事件
                    if (this.scroll.y <= this.scroll.maxScrollY + 50) {
                        this.$emit('scrollToEnd'); //上拉滚动到地步
                    }
                });
            }

            if (this.beforeScroll) {
                this.scroll.on('beforeScrollStart', () => {
                    this.$emit('beforeScroll');
                });
            }
        },
        enable() {
            this.scroll && this.scroll.enable();
        },
        disable() {
            this.scroll && this.scroll.disable();
        },
        refresh() {
            this.scroll && this.scroll.refresh();
        },
        scrollTo() {
            // 滚动到对应指定位置
            this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments); // arguments接收[x坐标， y坐标， duration]
        },
        scrollToElement() {
            // 根据索引滚动到对应的DOM元素
            // console.log(arguments);
            this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments); // arguments接收[ele,duration]
        }
    },
    watch: {
        // transition动画在100ms内延时 会导致dom高度计算不对
        data() {
            setTimeout(() => {
                this.refresh();
            }, this.refreshDelay);
        }
    }
};
</script>
